<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <!-- 2.搜索功能  收集数据  绑定事件 -->
            <input type="text" placeholder="请输入内容按enter键搜索" v-model="searchText" @keyup.enter="search">
            <ul>
                <!-- 1.遍历渲染数据 -->
                <li v-for=" person in searchResult">{{ person.name }} -- {{ person.age }}</li>
            </ul>
            <button>年龄升序</button>
            <button>年龄降序</button>
            <button>原本顺序</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    persons: [
                        { id: 1, name: "马冬梅", age: 18 },
                        { id: 2, name: "夏洛", age: 30 },
                        { id: 3, name: "袁华", age: 25 },
                        { id: 4, name: "秋雅", age: 16 },
                        { id: 5, name: "大傻春", age: 21 },
                        { id: 6, name: "王老师", age: 48 },
                        { id: 7, name: "李培华", age: 38 },
                        { id: 8, name: "大爷", age: 60 },
                    ],
                    searchText:"",
                    searchResult:[
                        { id: 1, name: "马冬梅", age: 18 },
                        { id: 2, name: "夏洛", age: 30 },
                        { id: 3, name: "袁华", age: 25 },
                        { id: 4, name: "秋雅", age: 16 },
                        { id: 5, name: "大傻春", age: 21 },
                        { id: 6, name: "王老师", age: 48 },
                        { id: 7, name: "李培华", age: 38 },
                        { id: 8, name: "大爷", age: 60 },
                    ],
                },
                methods:{
                    search(){
                        this.searchResult = this.persons.filter((person) => person.name.includes(this.searchText));
                    },
                },
            });
            vm.$mount("#app");
        </script>
    </body>
</html>